<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <canvas width="512" height="512"></canvas>
    <script src="/js/mesh.js"></script>
    <script>
      const {Renderer, Figure2D, Mesh2D, MeshCloud} = meshjs;

      const canvas = document.querySelector('canvas');
      const renderer = new Renderer(canvas, {
        // contextType: '2d',
      });

      const textureURL = 'https://p4.ssl.qhimg.com/t012170360e1552ce17.png';
      const textureURL2 = 'https://p4.ssl.qhimg.com/t01bfdd008c49606368.png';

      (async function () {
        const texture = await renderer.loadTexture(textureURL);
        const texture2 = await renderer.loadTexture(textureURL2);
        // console.log(texture);
        const size = 50;

        // const d = `M0 0L0 ${size}L${size} ${size}L${size} 0Z`;
        // const d = 'M30 30A10 10 1 1 0 10 10z';
        const figure = new Figure2D();
        figure.rect(50, 50, size, size);

        const f2 = new Figure2D();
        f2.rect(50, 50, 100, 100);

        const m = new Mesh2D(f2);
        m.setFill({
          color: [0, 0, 0, 1],
        });

        const f3 = new Figure2D();
        f3.rect(150, 150, 100, 100);

        const m2 = new Mesh2D(f3);
        m2.setFill({
          color: [0, 1, 0, 1],
        });

        const mesh = new Mesh2D(figure);
        mesh.setFill({
          color: [1, 0, 0, 1],
        });
        mesh.setTexture(texture, {
          // scale: false,
          // repeat: false,
          rect: [60, 60],
        });
        // mesh.setTransform(1, 0, 0, 1, 200, 200);

        const cloud = new MeshCloud(mesh, 10);
        setTimeout(() => {
          cloud.amount = 2000;
        }, 1000);
        // cloud.setTransform(2, [1, 0, 0, 1, 50, 50]);

        // cloud.setTextureFrames([texture, texture2], {
        //   rect: [60, 60],
        // });

        function update(t) {
          for(let i = 0; i < cloud.amount; i++) {
            cloud.setFillColor(i, [Math.random(), 0, Math.random(), 1]);
            cloud.setColorTransform(i, null);
            // cloud.grayscale(i, 1);
            // cloud.opacity(i, 0.3);
            // cloud.setFrameIndex(i, i);
            cloud.setTransform(i, [1, 0, 0, 1, Math.random() * 400, Math.random() * 400]);
          }
          renderer.clear();
          // renderer.globalRotate(Math.PI / 6);
          // renderer.drawMeshes([cloud]);
          // renderer.drawMeshes([cloud]);
          renderer.drawMeshes([m, cloud, m2]);
          // renderer.drawMeshes([mesh]);
          requestAnimationFrame(update);
        }
        update(0);

        // canvas.addEventListener('mousemove', (e) => {
        //   console.log([cloud.isPointInFill(0, [e.offsetX, e.offsetY]), cloud.isPointInStroke(0, [e.offsetX, e.offsetY])]);
        // });
        window.cloud = cloud;

        window.update = update;
      }());
    </script>
  </body>
</html>
